<!-- 我认领的任务 -->
<template>
	<view>
		<!-- 空为了解决高度塌陷 -->
		<view class="empty_box"></view>
		<view class="my_article">
			<view class="my_article_header">
				<view :class="[state == '0' ? 'unrelease' : 'released']">{{state == '0' ? '未发布' : '已发布'}}</view>
				<view class="my_article_header_time">{{ handleTime ? handleTime : ''}}</view>
			</view>
			<view class="my_article_body">
				<view class="my_article_body_lift">
					<view class="">
						{{ title }}
					</view>
				</view>
				<view class="my_article_body_right">
					<view class="views">
						<u-icon name="eye" color="#f06c7a" size="40rpx"></u-icon>
						<view class="viewsNum">{{views}}</view>
					</view>
					<view class="likes">
						<u-icon name="thumb-up" color="#f06c7a" size="40rpx"></u-icon>
						<view class="likesNum">{{likes}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {};
		},
		props: {
			// 文章标题
			title: {
				type: String
			},
			// 文章状态
			state: {
				type: Number
			},
			createTime: {
				type: String
			},
			// 阅读量
			views: {
				type: String
			},
			// 点赞数
			likes: {
				type: String
			}
		},
		computed: {
			// 计算事件,去掉T
			handleTime() {
				// 分割
				let time = this._props.createTime?.split('T')
				return time[0] + ' ' + time[1]
			}
		},
		methods: {
			// complete() {
			// 	this.$emit("complete", this._props.id)
			// }
		},
		created() {

		}
	}
</script>

<style lang="scss">
	.task_container {
		/* 确保没有高度的时候也会100% */
		min-height: 100vh;
		background-color: #F1F1F1;
	}

	.empty_box {
		height: 1rpx;
	}

	.my_article {
		width: 90%;
		border-radius: 10rpx;
		height: 200rpx;
		margin: 0 auto;
		overflow: hidden;
		margin-top: 40rpx;

		&_header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 4rpx;
			background-color: #fff;
			height: 30%;
			padding: 0 30rpx;

			.unrelease {
				color: red;
				font-size: 28rpx;
			}

			.released {
				color: green;
				font-size: 28rpx;
			}

			&_time {
				color: #cbcbcb;
			}
		}

		&_body {
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: #fff;
			height: 70%;
			padding: 0 30rpx;

			&_lift {
				font-size: 36rpx;
			}

			&_right {
				display: flex;
				justify-content: space-between;
				color: #cbcbcb;

				.views {
					display: flex;
					align-items: center;

					.viewsNum {
						margin: 0 20rpx;
					}
				}

				.likes {
					display: flex;
					align-items: center;

					.likesNum {
						margin: 0 20rpx;
					}
				}

			}
		}
	}
</style>
